<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		div{
			width: 296px;
			height: 180px;
			margin: 20px auto;
			position: relative;
		}
		div:hover::before{/* 鼠标经过之后 前面插入一个伪元素 */
			display: block;/* 伪元素属于行内元素 */
			content: " ";
			width: 100%;
			height: 100%;
			border: 10px solid rgba(255, 255, 255, 0.3);
			position: absolute;
			top: 0;
			left: 0;
			box-sizing: border-box;/* 把padding和border都算入width中 */
		}
	</style>
</head>
<body>
	<div>
		<img src="images/mi.jpg" alt="">
	</div>
	<div>
		<img src="images/mi.jpg" alt="">
	</div>
	<div>
		<img src="images/mi.jpg" alt="">
	</div>
	<div>
		<img src="images/mi.jpg" alt="">
	</div>
	<div>
		<img src="images/mi.jpg" alt="">
	</div>
</body>
</html>